<template>
	<view>
		<view
			style="background: url(https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/e63bcf73858e37c567847ca55821ddfa.png) no-repeat;background-size: 100%;width: 100%;height: 414rpx;">

		</view>
		<view style="width: 92%;position: absolute;top:10rpx;left: 4%;padding-bottom: 30rpx;">
			<view style="position: relative;">
				<input v-model="keywords" type="text"   class="sou" placeholder-class="suo"
					placeholder="找人/找货/搜信息" confirm-type="search" @confirm="search" />
				<image
					src="https://dyeego.oss-cn-beijing.aliyuncs.com/uploads/20220325/91243acc628efa1338d3d38826d22484.png"
					class="souicon" mode=""></image>
			</view>
			<view
				style="width: 100%;box-sizing: border-box;padding: 30rpx;overflow: hidden;background-color: #FFFFFF;border-radius: 10rpx;margin: 30rpx 0;">
				<view style="float: left;width: 25%;text-align: center;">
					<image
						src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220329/%E5%9B%BE%E5%B1%82%20606%402x.png"
						style="width: 80rpx;height: 80rpx;" mode=""></image>
					<view style="color: #000000;font-size: 24rpx;line-height: 30rpx;">
						大件运输
					</view>
				</view>
				<view style="float: left;width: 25%;text-align: center;">
					<image
						src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220329/%E5%9B%BE%E5%B1%82%20607%402x.png"
						style="width: 80rpx;height: 80rpx;" mode=""></image>
					<view style="color: #000000;font-size: 24rpx;line-height: 30rpx;">
						飞机运输
					</view>
				</view>
				<view style="float: left;width: 25%;text-align: center;">
					<image
						src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220329/%E5%9B%BE%E5%B1%82%20608%402x.png"
						style="width: 80rpx;height: 80rpx;" mode=""></image>
					<view style="color: #000000;font-size: 24rpx;line-height: 30rpx;">
						轮船运输
					</view>
				</view>
				<view style="float: left;width: 25%;text-align: center;">
					<image
						src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220329/%E5%9B%BE%E5%B1%82%20609%402x.png"
						style="width: 80rpx;height: 80rpx;" mode=""></image>
					<view style="color: #000000;font-size: 24rpx;line-height: 30rpx;">
						公路运输
					</view>
				</view>
			</view>

			<view style="line-height: 60rpx;color: #000000;font-size: 36rpx;font-weight: 600;">
				推荐服务商<text @click="search" style="float: right;color: #999999;font-size: 24rpx;">更多企业></text>
			</view>
			<view @click="qyxq(item.id)" v-for="(item,index) in wl_list" :key='index'
				style="box-sizing: border-box;padding: 30rpx 30rpx 0;background-color: #FFFFFF;margin-top: 26rpx;border-radius: 16rpx;">
				<view style="overflow: hidden;">
					<view style="width: 35%;float: left;position: relative;">
						<image :src="item.logo_image"
							style="width: 190rpx;height: 190rpx;display: block;border-radius: 10rpx;" mode=""></image>
					</view>
					<view style="width: 65%;float: left;padding: 6rpx 0;">
						<view style="line-height: 40rpx;color: #010101;font-size: 32rpx;margin: 10rpx 0;"
							class="yihang">
							<text
								style="background: linear-gradient(0deg, #C18C26 0%, #E1AC4E 100%);border-radius: 6rpx;color: #FEFEFE;font-size: 22rpx;padding: 0rpx 10rpx;float: left;margin-right: 10rpx;">
								认证
							</text>
							{{item.name}}
						</view>
						<!-- <view style="line-height: 30rpx;color: #999999;font-size: 22rpx;margin: 10rpx 0;" class="erhang">
							主营：{{item.main_content}}
						</view> -->
						<view style="overflow: hidden;line-height: 30rpx;margin: 10rpx 0;">
							<view style="width: 10%;float: left;">
								<image
									src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220329/%E5%9B%BE%E5%B1%82%20564%402x.png"
									style="width: 30rpx;height: 30rpx;" mode=""></image>
							</view>
							<view style="color: #333333;font-size: 22rpx;width: 90%;float: left;">
								{{item.wl_address_text}}
							</view>
						</view>
						<view style="overflow: hidden;line-height: 30rpx;">
							<view style="width: 10%;float: left;">
								<image
									src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220329/%E5%9B%BE%E5%B1%82%20565%402x.png"
									style="width: 30rpx;height: 30rpx;" mode=""></image>
							</view>
							<view style="color: #333333;font-size: 22rpx;width: 90%;float: left;">
								{{item.wl_main_text}}
							</view>
						</view>
					</view>
				</view>
				<view style="display: flex;text-align: center;color: #999999;font-size: 22rpx;line-height: 100rpx;">
					<view style="flex: 1;">
						浏览量：{{item.views_num}}
					</view>
					<view style="flex: 1;">
						关注数：{{item.contact_num}}人
					</view>
					<view style="flex: 1;">
						联系次数：{{item.attention_num}}次
					</view>
				</view>
			</view>
			<view v-if="wl_list.length<=0" style="text-align: center;margin-top: 50rpx;">
				<image
					src="https://dyeego.oss-cn-beijing.aliyuncs.com/uploads/20220406/9f0a29c5b79b0296d72cf8f5bb77f5c2.png"
					style="width: 60%" mode="widthFix"></image>
			</view>
			<view v-if="wl_list.length<=0"
				style="font-size: 28rpx;color: #C0C0C0;text-align: center;line-height: 60rpx;width: 100%;padding-bottom: 40rpx;">
				已经到底了！
			</view>

			<view style="display: flex;line-height: 80rpx;text-align: center;">
				<view style="flex: 1;position: relative;" @click="qi_huo(0)"
					:class="qh_type==0?'qiactive_type':'qi_type'">
					推荐帖子
				</view>
				<view style="flex: 1;position: relative;" @click="qi_huo(1)"
					:class="qh_type==1?'qiactive_type':'qi_type'">
					车找货
				</view>
				<view style="flex: 1;position: relative;" @click="qi_huo(2)"
					:class="qh_type==2?'qiactive_type':'qi_type'">
					货找车
				</view>
			</view>

			<view style="height: auto;">

				<view v-for="(item,index) in list" :key='index'
					style="box-sizing: border-box;padding: 30rpx;background-color: #FFFFFF;margin-top: 26rpx;border-radius: 12rpx;">
					<view style="overflow: hidden;">
						<view @click="yonghu_xx(item.user_id)" style="width: 18%;float: left;overflow: hidden;">
							<image :src="item.user.avatar"
								style="width: 92rpx;height: 92rpx;border-radius: 50%;display: block;" mode="">
							</image>
						</view>
						<view @click="tzxq(item.id)" style="width: 82%;float: left;padding: 6rpx 0;">
							<view style="height: 40rpx;line-height: 40rpx;">
								<text
									style="color: #000000;font-size: 30rpx;display: inline-block;width: 200rpx;font-weight: 600;"
									class="yihang">{{item.user.nickname || ''}}</text>
								<text style="color: #999999;font-size: 24rpx;float: right;">发布于  {{item.create_time}}</text>
							</view>
							<view style="height: 40rpx;line-height: 40rpx;color: #999999;font-size: 24rpx;"
								class="yihang">
								{{item.user.company || ''}}
							</view>
						</view>
					</view>


					<view @click="tzxq(item.id)">
						<view style="color: #666666;font-size: 28rpx;line-height: 40rpx;margin-top: 30rpx;"
							class="erhang">
							{{item.main_content}}
						</view>
						<view style="overflow: hidden;margin-top: 20rpx;" class="tu" v-if="item.main_images">
							<view v-for="(a,b) in item.main_images" :key='b'
								style="width: 190rpx;height: 190rpx;float: left;border-radius: 16rpx;overflow: hidden;">
								<image :src="a" style="width: 100%;height: 100%;left: 0;" mode="aspectFill"></image>
							</view>

						</view>
					</view>
					<view style="line-height: 80rpx;display: flex;border-top: 1px solid #eeeeee;margin-top: 20rpx;">
						<view
							style="flex: 2;color: #999999;font-size: 24rpx;box-sizing: border-box;padding-left: 60rpx;position: relative;">
							<image
								src="@/static/index/icon_collect.png"
								style="width: 30rpx;height: 30rpx;position: absolute;top: 50%;left: 20rpx;transform: translateY(-50%);"
								mode=""></image>
							收藏({{item.collect_num}})

						</view>
						<view
							style="flex: 2;color: #999999;font-size: 24rpx;box-sizing: border-box;padding-left: 60rpx;position: relative;">
							<image
								src="@/static/index/icon_comment.png"
								style="width: 30rpx;height: 30rpx;position: absolute;top: 50%;left: 20rpx;transform: translateY(-50%);"
								mode=""></image>
							评论({{item.comment_num}})

						</view>
						<view
							style="flex: 2;color: #999999;font-size: 24rpx;box-sizing: border-box;padding-left: 60rpx;position: relative;">
							<image
								src="@/static/index/icon_like.png"
								style="width: 30rpx;height: 30rpx;position: absolute;top: 50%;left: 20rpx;transform: translateY(-50%);"
								mode=""></image>
							点赞({{item.like_num}})

						</view>
					</view>
				</view>

			</view>
			<view v-if="kk" style="text-align: center;">
				<image src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220329/e86889a9b8fd67d8950e4775d67316c.png" style="width: 400rpx;" mode="widthFix"></image>
			</view>
			<view v-if="list.length<=0"
				style="font-size: 28rpx;color: #C0C0C0;text-align: center;line-height: 80rpx;width: 100%;padding-bottom: 40rpx;">
				暂无数据
			</view>
			<view v-if="list.length>0 && enmpy"
				style="font-size: 28rpx;color: #C0C0C0;text-align: center;line-height: 80rpx;width: 100%;padding-bottom: 40rpx;">
				已经到底了！
			</view>
		</view>

	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keywords: '',
				wl_list: [],
				qh_type: 0,
				page: 1,
				kk: false,
				enmpy: false,
				list: [],
			}
		},
		// onLoad() {
		// 	this.tj_wlqy()
		// 	this.order()
		// },
		onShow() {
			this.page = 1
			this.enmpy = false
			this.kk = false
			this.list = []
			this.qh_type = 0
			this.tj_wlqy()
			this.order()
		},
		onReachBottom: function() {
			if (this.enmpy) {
				return
			} else {
				this.order()
			}

		},
		methods: {
			// 推荐物流企业
			tj_wlqy: function() {
				this.post('api/voice/recommend_firm', '', true).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.wl_list = res.data
					}
				})
			},
			qyxq: function(id) {
				uni.navigateTo({
					url: '../../../subpages/pages/wuliuqiye/wl_qyxq?id=' + id
				})
			},
			search: function() {
				uni.navigateTo({
					url: '../../../subpages/pages/wuliuqiye/wlqy_list?keywords=' + this.keywords
				})
			},
			order: function() {
				this.post('api/voice/special_voice_list', {
					page: this.page,
					type: this.qh_type,
					limit: 10
				}, true).then(res => {
					console.log(res)
					if (res.code == 1) {
						if (this.page == 1) {
							if (res.data.data == null || res.data.data.length == 0) {
								this.kk = true
								this.enmpy = true
								return
							} else if (res.data.data.length < 10) {
								this.enmpy = true
							}
						} else {
							if (res.data.data == null || res.data.data.length == 0) {
								this.enmpy = true
								return
							} else if (res.data.data.length < 10) {
								this.enmpy = true
							}
						}

						this.page++
						this.list.push(...res.data.data)
					} else {
						this.kk = true
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			},
			qi_huo: function(index) {
				this.page = 1
				this.enmpy = false
				this.kk = false
				this.list = []
				this.qh_type = index
				this.order()
			},
			yonghu_xx: function(id) {
				uni.navigateTo({
					url: '../wenzhang/yhxx?id=' + id
				})
			},
			tzxq: function(id) {
				uni.navigateTo({
					url: '../wenzhang/wzxq?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss">
	.qi_type {
		color: #999999;
		font-size: 30rpx;
		font-weight: 500;
	}

	.qiactive_type {
		color: #000000;
		font-size: 30rpx;
		font-weight: 600;
	}

	.qiactive_type::after {
		content: ''; // 必须
		position: absolute;
		left: 50%;
		bottom: 0rpx;
		transform: translateX(-50%);
		width: 60rpx;
		height: 6rpx;
		background-color: #0078FF;
	}

	page {
		background-color: #F8F8F8 !important;
		padding-bottom:100rpx;
		font-family: Demibold;
	}

	.sou {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		box-sizing: border-box;
		padding: 0 30rpx 0 80rpx;
		background-color: rgba(255, 255, 255, .3);
	}

	.suo {
		color: #FFFFFF;
		opacity: 1;
		font-size: 26rpx;
	}

	.souicon {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: 50%;
		left: 30rpx;
		transform: translateY(-50%);

	}
</style>
